<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
<!--  引入VUE-->
    <script src="vue.js"></script>
    <!-- 引入elementui样式 -->
    <link rel="stylesheet" href="element-ui/http_unpkg.com_element-ui_lib_theme-chalk_index.css">
    <!-- 引入elementui组件库 -->
    <script src="element-ui/http_unpkg.com_element-ui_lib_index.js"></script>
    <script src="axios.js"></script>

  <style>

    #box{
      background-color: aliceblue;
      box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
      border-radius: 4px;
        border-color: #409EFF;
      width: 500px;
      position: absolute;
      margin-left: 500px;
      margin-top: 100px;
      display: inline;
      height: 500px;

    }
    #header{
      margin-top: 20px;
      font-size: 30px;
        color: #409EFF;
      text-align: center;
    }
    #loginMain{
        margin-top: -30px;
      width: 300px;
        display: block;
      margin-left: 60px;
        text-align: left;
    }
    #login{
        margin-top: 20px;
        position: center;
    }
  </style>
  <title>图书管理系统</title>
</head>
<body style="background: url('backgroud.jpg')">
<div id="box" >
  <el-container>

      <el-header id="header" height="20px">
        欢迎进入图书管理系统
      </el-header>
      <el-divider></el-divider>
      <el-main id="loginMain">
        用户名：<el-input  v-model="username" placeholder="请输入用户名" ></el-input><br><br>
        密码：<el-input  placeholder="请输入密码" v-model="password" show-password ></el-input>
          <div style="margin-top: 20px;">验证码：<el-input  v-model="inputVcode"  placeholder="请输入验证码" style="width: 150px"> </el-input><br>
              <img src="InputCodeServlet" style="margin-top: 20px"> </div>
          <el-button id="login" type="primary" @click="loginUser"  >登录</el-button>
      </el-main>

  </el-container>
</div>
<script>
  new Vue({
    el:"#box",
    data:{
        username:"",
        password:"",
        isShow:false,
        inputVcode:"",
        loginInfo:""
    },
    mounted(){

    },
    methods:{

        loginUser(){
            //由于axios的ContentType默认是json请求头不是x-www-form-urlencoded所以得用以下方法进行转化
            let param = new URLSearchParams()
            param.append('username', this.username)
            param.append('password', this.password)
            param.append('inputVcode', this.inputVcode)
            axios({
                method:'post',
                url:'LoginServlet',
                data: param,

            }).then(function (response) {
                    if (response.data === "loginSuccess") {
                        location.href="index.html";
                    }
                    if (response.data === "passwordWrong") {
                        Vue.prototype.$message({
                            message: '密码错误',
                            type: 'error',
                            duration:1000
                        });
                    }
                    if (response.data === "noUser") {
                        Vue.prototype.$message({
                            message: '该用户不存在',
                            type: 'error',
                            duration:1000

                        });
                    }
                    if (response.data === "inputVcodeWrong") {
                        Vue.prototype.$message({
                            message: '验证码输入错误',
                            type: 'error',
                            duration:1000

                        });
                    }
                }
            );
        }
    }
  })
</script>
</body>
</html>